<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
// 面向对象 - 终极奥义  ->  代码的复用

// 思想之一：高 内聚、低 耦合：
  // 耦合 -> 
  function move(type, targetDistance) {
    // box 为函数外面的变量，所以 move 函数 不能放到 单独的 js 文件中
    // 即 move 函数 不能被！复用！
      // 我们管， box 是函数外面这种变量的情况
        // 叫 函数与 外界 “耦合”
    box.addEventListener('click', e => {
      let distance = 0;

      const timeId = setInterval(() => {
        distance += 5;

        box.style[type] = distance + 'px';

        if (distance > targetDistance) {
          clearInterval(timeId);
        }
      }, 1000 / 60)
    });
  }


// 思想二：继承、封装、多态
  // 封装：将代码封装至函数体内；目的：被封装的代码，可复用
  // 继承：实例对象，能拿到 原型链上的 各种方法 和属性；
  // 多态：若「自己原型对象」和「Object原型对象」有同名方法或属性；；
      // 自己原型对象上的方法，会“覆盖” Object原型对象上的方法；


// 面试问题：请说一说“什么叫面向对象”？
  // 大的问题，回答注意点：1）要有逻辑  2）讲自己会的话题（引导后续面试话题）
</script>